<template>
  <div id="project-description">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="declare">
        <p class="ellipsis">项目介绍</p>
      </div>
    </div>
    <div class="row row-3">
      <div class="row row-1">
        <p class="normal">
          &emsp;&emsp;党的十九大以来，以习近平同志为核心的党中央对环境保护工作提出更高要求，“既要金山银山，又要绿水青山”的发展思路进一步巩固。石家庄市委、市政府坚持创新发展、绿色发展、高质量发展，以实现“政府决策科学化、环境治理精细化、指挥调度高效化”为目标。
        </p>
      </div>
      <div class="row row-2">
        <p class="normal">
          &emsp;&emsp;2019年8月8日上午，市委书记邢国辉到市大气办进行了调研，对市大气污染防治指挥调度中心明确提出了改进要求：建设能代表省会形象、高标准、现代化、高效率的市大气污染防治指挥调度中心。为落实国辉书记要求，构建全市大气污染防治指挥调度系统平台，深入融合物联网大数据等先进技术，加强对各县（市、区）政府、市直相关职能部门的实时调度，推动全市大气污染防治指挥调度工作精准化发展。
        </p>
      </div>
    </div>
    <div class="row row-4">
      <div class="swiper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide-1">
              <img
                src="../../assets/img/index/20190916135324.png"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-2">
              <img
                src="../../assets/img/index/20190916135328.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-3">
              <img
                src="../../assets/img/index/20190916135331.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-4">
              <img
                src="../../assets/img/index/20190916135333.png"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-5">
              <img
                src="../../assets/img/index/20190916135336.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-6">
              <img
                src="../../assets/img/index/20190916135338.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import swiper from "swiper";

export default {
  methods: {
    initSwiper() {
      new swiper(".swiper-container", {
        slidesPerView: 3,
        slidesPerGroup: 1,
        loop: true,
        autoplay: true,
        delay: 1000,
        pagination: {
          el: ".swiper-pagination"
        },
        effect: "coverflow",
        centeredSlides: true,
        coverflowEffect: {
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: true
        }
      });
    }
  },
  mounted() {
    this.initSwiper();
  }
};
</script>

<style lang="stylus" scoped>
#project-description
    position relative
    width 100%
    height 100%

    > .row-1
        height 80px

    > .row-2
        height 59px
        padding 30px 0

        > .declare
            margin 0 auto

    > .row-3
        padding 30px 0

        > .row
            > p
                text-align justify
                line-height 55px
                font-size 23px
                color #fff

        > .row-2
            padding-top 30px

    > .row-4

        > .swiper
            position relative
            width 690px
            height 222px
            margin 0 auto
            padding 30px 11px 6px 5px
            background url("../../assets/img/index/crouselBac.png") no-repeat top left
            background-size 706px 257px

            > .swiper-container
                position relative
                width 675px
                height 200px

                > .swiper-wrapper
                    > .swiper-slide
                        height 200px

                        > img
                            margin 0 auto
</style>
